<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Layer 手机版</title>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<script src="lib/zeptojs/zepto.min.js"></script>
<script src="lib/fastClick.js"></script>
<script src="layer/layer.js"></script>
<script src="layer/ext/photos.js"></script>
<link type="text/css" rel="stylesheet" href="layer/ext/photos.css">

<style>
/*demo*/
body{padding:0;margin:0;}
#lay a{display:inline-block;padding:0 1rem; margin:.3rem;background:#EEE; border-radius:3px;height:40px; line-height:40px;}

</style>
</head>

<body>
<div id="lay">
	<div style="padding:10px;">Layer效果</div>
	<a class="btn1" event="lay('left')">left</a>
	<a class="btn1" event="lay('top')">top</a>
	<a class="btn1" event="lay('right')">right</a>
	<a class="btn1" event="lay('bottom')">bottom</a>
	<a class="btn1" event="lay('zoom')">zoom</a>
	<a class="btn1" event="lay()">fade(default)</a>
	<a class="btn1" event="lay([{'-webkit-transform':'scale(.1) rotate(90deg)'},{rotate:'0deg',scale:1},{rotate:'90deg',scale:.1}])">fade(自定义)</a>
	<a event="$.layer.close('all')">[closeAll]</a>
	<hr>
	<a event="page({timeout:2})">$.layer(定时关闭)</a>
	<a event="page({anim:'top'})">$.layer(top)</a>
	<a event="page({anim:'zoom'})">$.layer(zoom)</a>
	<hr>
	<a event="actionsheet()">$.layer.actions()</a>
	<a event="actionsheet({style:{background:'rgba(0,50,0,.1)',top:0,bottom:'auto'},anim:'top'})">$.layer.actions(option)</a>
	<hr>
	<a event="$.layer.dialog('这是一个警告信息！<br><br>这是一个警告信息！',['确定','取消'],function(i){console.log('点击按扭：'+i)})">$.layer.dialog</a>
	<a event="$.layer.dialog('这是一个警告信息！<br><br>这是一个警告信息！','还有标题哦！',['确定','取消'],function(i){console.log('点击按扭：'+i)})">$.layer.dialog(标题)</a>
	<hr>
	<a event="pageTab()">$.layer.tab([tab])</a>
	<a event="pageTab({anim:'zoom'})">$.layer.tab([tab])</a>
	<hr>
	<a event="$.layer.toast('消息资料')">$.layer.toast()</a>
	<hr>
	<a event="$.layer.loading('加载中...')">$.layer.loading()</a>
	<hr>
	<a event="photos()">$.layer.photos()</a>
	<hr>
	<a href="#hash">hash</a>
	<a href="" target="_blank">_blank</a>
	<a class="closeit">关闭当前</a>
	<a class="hideit">隐藏窗口</a>
</div>
<div style="height:300px;"></div>

<script>
FastClick.attach(document.body);
var tap='createTouch' in document?'tap':'click';
$('a[event]').on(tap,function(){
	eval($(this).attr('event'));
})
//{background:'#F00',color:'#FF0'}
//$.layer({id:'aaa',head:{title:'这里是标题',style:'background:#F00;color:#FF0;'},content:['sdf<a onclick="$.layer.close(\'aaa\')">close aaa</a>','background:#060;color:#0F6'],size:['250px','250px'],foot:'asdf',shade:{background:'rgba(100,0,0,0.3)'}});

function lay(ani){
	var ci=$.layer({head:'这里是标题',content:'<div class="laybox">'+$('#lay').html().replace(/event/g,'onclick')+'</div>',anim:ani,
		onshow:function(e){
			//console.log('onShow');
			//关闭
			$('.closeit').on(tap,function(){
				ci.close();
				//console.log(ci)
			})
			//隐藏
			$('.hideit').on(tap,function(){
				$.layer.close(ci,'',false)
			})
		},
		onclose:function(e){
			//console.log('onClose')
		}
	});
	ci.on('show',function(e){
		//console.log('show event')
		//console.log(ci)
	})
	ci.on('close',function(e){
		//console.log('close event')
		//console.log(ci)
		//setTimeout(function(){ci.show();},1000)
	})
}
function actionsheet(option){
	$.layer.actions([{text:'用户登录',label:0},{text:'退出登录',label:1,onClick:function(){console.log('login Out!')}},{text:'百度',label:{href:'http://www.baidu.com/',target:'_blank'}},{},{text:'关闭',label:1}],option);
}
function page(opt){
	var page=$.layer($.extend({head:{title:'子页面',btn:[{text:'关闭'}]},content:'mwpw',anim:'left',size:['100%','100%'],
		foot:'底部'
	},opt));
	page.on('show',function(e){
		console.log('page show event')
	})
	page.on('close',function(e){
		console.log('page close event')
	})
}
function pageTab(opt){
	var page=$.layer.tab([
		{title:'标签A',content:'这是标签A的内容，AAAAAAAAAAAAAAAAAAAAAAAAAAAA'},
		{title:'标签B',content:'这是标签B的内容，BBBBBBBBBBBBBBBBBBBBB'},
		{title:'标签C',content:'这是标签C的内容，CCCCCCCCCCCCCCCCCCCCCCC'}
	],opt||{});
}
function photos(){
	$.layer.photos([
		{src:'http://www.dcloud.io/hellomui/images/shuijiao.jpg',intro:'我是一个猫星人，喵'},
		{src:'http://www.dcloud.io/hellomui/images/muwu.jpg',intro:'午后，一杯咖啡，一个下午'},
		{src:'http://www.dcloud.io/hellomui/images/shuijiao.jpg',intro:'黑猫白猫，能抓老鼠的就是好猫'},
		{src:'http://www.dcloud.io/hellomui/images/cbd.jpg',intro:'城市之光，伟大的城市！'},
		{src:'http://www.dcloud.io/hellomui/images/shuijiao.jpg',intro:'还是两只猫'},
	],{title:'我的相册'})
}

</script>
</body>
</html>
